<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="" method="get" >
        <div class="input-group">
            <label for="user">用户名:</label>
            <input type="text" id="user" name="user">
        </div>
        <div class="input-group">
            <label for="">密&emsp;码:</label>
            <input type="text" name="pwd">
        </div>
        <div class="input-group">
            <label for="user">出生年份:</label>
            <select name="year" id="">
                <option value="2000">2000</option>
                <option value="2001">2001</option>
                <option value="2002">2002</option>
                <option value="2003">2003</option>
                <option value="2004">2004</option>
                <option value="2005">2005</option>
                <option value="2006">2006</option>
                <option value="2007">2007</option>
                <option value="2008">2008</option>
                <option value="2009">2009</option>
                <option value="2010">2010</option>
                <option value="2011">2011</option>
                <option value="2012">2012</option>
                <option value="2013">2013</option>
                <option value="2014">2014</option>
                <option value="2015">2015</option>
                <option value="2016">2016</option>
                <option value="2017">2017</option>
                <option value="2018">2018</option>
                <option value="2019">2019</option>
                <option value="2020">2020</option>
                <option value="2021">2021</option>
            </select>
        </div>
        <div class="input-group">
            <input type="submit" value="提交">
            <input type="reset" value="重置">
        </div>
    </form>
</body>
<script>
    var userInp = document.getElementsByName("user")[0];
    var yearSel = document.getElementsByName("year")[0];
    var form = document.getElementsByTagName("form")[0];

    // onfocus 表单聚焦时触发  (聚焦: 点击选中文本框)
    // userInp.onfocus = function(){
    //    console.log("表单聚焦"); 
    // }

    // onblur 表单失焦时触发  (失焦: 点击除被选中的文本框以外的任何位置 => 光标消失)
    // userInp.onblur = function(){
    //     console.log("表单失焦");
    // }

    // onchange 表单内容发生改变时触发
    // 用法1. 表单内容发生改变  +  失焦/按回车键(不建议在表单中使用)  
    // 用法2. 下拉框选项切换时 触发
    // userInp.onchange = function(){
    //     console.log("表单内容改变");
    // }

    // yearSel.onchange = function(){
    //     console.log("下拉框选项切换",this.value,this.selectedIndex);
    // }


    // oninput 表单内容发生改变时触发  (即时输入)
    // userInp.oninput = function(){
    //     console.log("表单内容改变",this.value);
    // }

    // onselect 表单内容选中时触发
    // userInp.onselect = function(){
    //     console.log("输入选中",userInp.selectionStart,userInp.selectionEnd);
    //     console.dir(userInp.value.slice(userInp.selectionStart,userInp.selectionEnd));
    // }

    // onsubmit  表单提交(绑定给form元素,由提交按钮/button/enter触发)
    // onreset   表单重置(绑定给form元素,由重置按钮触发)

    form.onsubmit = function(){
        console.log("表单提交");

        return false; // 阻止表单默认跳转
    }

    form.onreset = function(){
        console.log("表单重置");

    }






</script>
</html>
